<!DOCTYPE html>
<html>
<!-- 	4.制作4个嵌套DIV ，要求：
	      1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
	      5.查找每个DIV的子元素和子对象 -->
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#i_id1{
			width: 500px;
			height: 500px;
			background-color: #FF0000;
			border: 2px solid #0000FF;
		}
		#i_id2{
			width: 350px;
			height: 350px;
			background-color: aquamarine;
		}
		#i_id3{
			width: 200px;
			height: 200px;
			background-color: cornflowerblue;
		}
		#i_id4{
			width: 70px;
			height: 70px;
			background-color: burlywood;
		}
	</style>
	<body>
		<div id="i_id1">
			<p>i_id1</p>
			<div id="i_id2">
				<p>i_id2</p>
				<div id="i_id3">
					<p>i_id3</p>
					<div id="i_id4">
						<p>i_id4</p>
					</div>
				</div>
			</div>
		</div>
		<button type="button" onclick="father()">打印父级</button>
		<button type="button" onclick="son()">打印子级</button>
	</body>
	<script type="text/javascript">
		function father(){
			console.log('1级父元素为：');
			console.log(document.getElementById('i_id4').parentElement);
			console.log('1级父节点为：');
			console.log(document.getElementById('i_id4').parentNode);
			console.log('2级父元素为：');
			console.log(document.getElementById('i_id4').parentElement.parentElement);
			console.log('2级父节点为：');
			console.log(document.getElementById('i_id4').parentNode.parentNode);
			console.log('3级父元素为：');
			console.log(document.getElementById('i_id4').parentElement.parentElement.parentElement);
			console.log('3级父节点为：');
			console.log(document.getElementById('i_id4').parentNode.parentNode.parentNode);
		}
		function son(){
			console.log('d1的子元素：');
						console.log(document.getElementById('i_id1').children);
						console.log('d1的子节点');
						console.log(document.getElementById('i_id1').childNodes);
						console.log('d2的子元素：');
						console.log(document.getElementById('i_id1').children);
						console.log('d2的子节点');
						console.log(document.getElementById('i_id1').childNodes);
						console.log('d3的子元素：');
						console.log(document.getElementById('i_id1').children);
						console.log('d3的子节点');
						console.log(document.getElementById('i_id1').childNodes);
						console.log('d4的子元素：');
						console.log(document.getElementById('i_id1').children);
						console.log('d4的子节点');
						console.log(document.getElementById('i_id1').childNodes);
		}
	</script>
</html>
